<template>
  <div class="reg">
    <!-- 图片 -->
    <div class="tu"></div>
    <!-- 返回箭头 -->
    <router-link to="/wo">
      <div class="fan"></div>
    </router-link>
    <!-- 登录 -->
    <div class="deng">
      <p class="span">欢迎登录</p>
      <p>
        <i class="iconfont icon-01 user"></i>
        <input
          type="text"
          name="username"
          placeholder="用户名："
          v-model="username"
          @keyup="user"
          @focus="focusfns1"
          @blur="blurs"
          autocomplete="off"
        />
        <i class="correct" v-show="correct"></i>
      </p>
      <div class="ti">{{ ti_content }}</div>
      <p>
        <i class="iconfont icon-mimasuo user1"></i>
        <input
          type="text"
          name="password"
          placeholder="密码："
          v-model="password"
          @keyup="pwd"
          maxlength="6"
          @focus="focusfns2"
          autocomplete="off"
        />
        <i class="correct" v-show="correct2"></i>
      </p>
      <div class="ti">{{ ti_content2 }}</div>
      <p class="disan">
        <input type="button" value="登录" class="dl" @click="register" />
      </p>
      <p>
        <router-link to="/logn" class="liji">
          <span class="s">立即注册</span>
        </router-link>
        <router-link to="/post" class="liji">
          <span>忘记密码？</span>
        </router-link>
      </p>
      <p class="fang">
        <span class="di">第三方登录</span>
      </p>
      <p class="fle">
        <router-link to="/qq">
          <span class="qq"></span>
        </router-link>
        <router-link to="/weibo">
          <span class="wei"></span>
        </router-link>
        <router-link to="weixin">
          <span class="xin"></span>
        </router-link>
      </p>
      <p class="tiao">
        <span>登录即表示同意</span>
        <router-link to="" class="xiao"
          ><span>《小明家具用户协议条款》</span>
        </router-link>
      </p>
    </div>
    <div class="tishi" v-show="xian">
      <span>{{ deng }}</span>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      username: "",
      password: "",
      ti_content: "",
      ti_content2: "",
      correct: false,
      correct2: false,
      deng: "", //提示内容
      xian: false, //显示
    };
  },
  methods: {
    user(val) {
      if (this.username != "") {
        if (
          /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/.test(this.username)
        ) {
          //全局只能是英文字母、数字、下划线
          this.correct = true;
          this.ti_content = "";
        } else {
          this.ti_content = "用户名仅支持6~10位的数字和字母的组合";
          this.correct = false;
        }
      } else {
        this.ti_content = "";
        this.correct = false;
      }
    },
    pwd() {
      if (this.password !== "") {
        var reg = /^\d{6}$/gi;
        if (!reg.test(this.password)) {
          this.ti_content2 = "请输入6位数字";
          this.correct2 = false;
        } else {
          this.ti_content2 = "";
          this.correct2 = true;
        }
      } else {
        this.ti_content2 = "";
        this.correct2 = false;
      }
    },
    blurs() {
      if (this.correct) {
        // 获取数据
        var obj = { username: this.username, id: 200 };
        this.$axios
          .post("http://47.114.130.21:3002/user", obj)
          .then((data) => {
            // console.log(data.data);
            if (data.data == 404) {
              this.ti_content = "此用户名存在";
            } else {
              this.ti_content = "此用户名不存在";
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    register() {
      this.username == "" ? (this.ti_content = "用户名不能为空") : "";
      this.password == "" ? (this.ti_content2 = "用户名不能为空") : "";

      if (this.ti_content == "此用户名存在") {
        // 获取数据
        var obj = {
          username: this.username,
          id: 500,
          password: this.password,
        };
        this.$axios
          .post("http://47.114.130.21:3002/user", obj)
          .then((data) => {
            // console.log(data.data);
            if (data.data == 404) {
              this.ti_content2 = "密码错误";
              this.username = "";
              this.password = "";
              this.correct = false;
              this.correct2 = false;
            } else {
              this.xian = true;
              this.deng = "登入成功";
              localStorage.setItem("username", this.username);

              // 访问数据库


              // 将数据出入数据库中
              // 将一个 JSON 字符串转换为对象
              // console.log(p); //object
              var username = localStorage.getItem("username");
              // console.log(username);
              // 存入数据库
              // 获取数据
              var obj = { username: username,id: 1000};
              // console.log(obj);
              this.$axios
                .post("http://localhost:3000/serve",obj)
                .then((data) => {
                  console.log(data.data[0].shop);
                  console.log(data.data[0].ding);
                  localStorage.setItem("shop", JSON.stringify(data.data[0].shop));
                  localStorage.setItem("ding", JSON.stringify(data.data[0].ding));
                })
                .catch((err) => {
                  console.log(err);
                });

              // console.log("登入成功");
              setTimeout(() => {
                this.xian = false;
                this.$router.push({ path: "/ind" });
              }, 500);

              this.username = "";
              this.password = "";
              this.correct = false;
              this.correct2 = false;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    focusfns1() {
      this.ti_content = "";
    },
    focusfns2() {
      this.ti_content2 = "";
    },
  },
};
</script>
<style lang="less" scoped>
.reg {
  background-color: #fff !important;
  background: url("../../public/img/d1.jpg") -37px 0 no-repeat;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: 120%;
  .tu {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(160, 160, 175, 0.4);
  }
  // 返回
  .fan {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(89, 94, 91, 0.4);
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
  }
  .fan::before {
    content: "";
    width: 15px;
    height: 15px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
    position: absolute;
    top: 8px;
    left: 9px;
  }

  //   登录
  .deng {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: -38px;
    transform: translateX(10%);
    width: 101%;
    text-align: center;
    height: 100%;
    form {
      margin-top: 70px;
    }
    .span {
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      margin: 76px 50px;
      text-align: initial;
    }
    p {
      margin-top: 10px;
      position: relative;
      // 图标
      i {
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        color: #fff;
        top: 26px;
        font-size: 23px;
      }
      .user {
        font-weight: bolder;
      }
      .user1 {
        top: 29px;
      }
      input {
        font-size: 14px;
        width: 73%;
        padding: 15px 30px;
        outline: none;
        border: 1px solid transparent;
        background: transparent;
        color: #fff;
        margin-top: 20px;
        border-bottom: 1px solid #fff;
      }
      input:focus::-webkit-input-placeholder {
        color: transparent;
      }
      input::-webkit-input-placeholder {
        color: #fff;
      }
      .dl {
        background-color: #5aadfd;
        color: #fff;
      }
      // 忘记密码
      .liji {
        margin-top: 20px;
        span {
          font-size: 13px;
          color: #fff;
        }
        .s {
          margin: 0 140px 10px 0;
        }
      }

      // 第三方登录
      .di {
        font-size: 13px;
        color: #fff;
      }
      .di::after {
        content: "";
        display: inline-block;
        width: 80px;
        border-top: 1px solid #fff;
        transform: translate(10px, -3px);
      }
      .di::before {
        content: "";
        display: inline-block;
        width: 80px;
        border-top: 1px solid #fff;
        transform: translate(-10px, -3px);
      }
      .qq,
      .wei,
      .xin {
        display: inline-block;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 15px 0 0 0;
        transform: scale(0.8);
      }
      // qq
      .qq {
        background: url(/img/jing_xue.png) -130px -1px no-repeat;
      }
      .wei {
        background: url(/img/jing_xue.png) -66px -1px no-repeat;
      }
      .xin {
        background: url(/img/jing_xue.png) -3px -1px no-repeat;
      }
      .correct {
        display: inline-block;
        position: absolute;
        background: #fff;
        background-size: 100%;
        top: 38px;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        right: 53px;
      }
      .correct::after {
        content: "";
        display: inline-block;
        position: absolute;
        right: -2px;
        background: url(/img/check11.png) no-repeat;
        background-size: 100%;
        top: -2px;
        height: 18px;
        width: 18px;
        z-index: 2;
      }
    } //p
    // 提示信息
    .ti {
      color: #ff5555;
      margin: 5px 0 -25px 52px;
      height: 17px;
      width: 275px;
      text-align: start;
    }
    .fle {
      display: flex;
      justify-content: space-around;
      padding: 0px 34px;
      margin-top: 0px;
    }
    // 登录
    .disan {
      input {
        border-radius: 20px;
        height: 40px;
        line-height: 10px;
        border: transparent;
      }
    }
    // 第三方
    .fang {
      margin-top: 155px;
    }
    // 同意条款
    .tiao {
      color: #fff;
      .xiao {
        span {
          color: #eba735;
        }
      }
    }
  }
  // 登入提示
  .tishi {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.3);

    span {
      width: 200px;
      height: 100px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      display: inline-block;
      text-align: center;
      line-height: 100px;
      font-size: 18px;
      border-radius: 10px;
      transform: translate(50%, 280%);
    }
  }
} //reg
</style>